<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible.sync="dialogFormVisible"
      width="40%"
      @close="cancel"
    >
      <h3 class="title">{{ form.title }}</h3>
      <div class="body">
        <span>{{ formatDate(form.createTime) }}</span
        ><span>{{ form.username }}</span
        ><span
          ><i class="el-icon-view"></i><span>{{ form.visits }}</span></span
        >
      </div>
      <div class="content">
        <p>{{ changeType(form.articleBody) }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
export default {
  props: ['row'],
  data () {
    return {
      dialogFormVisible: false,
      form: {}
    }
  },
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 取消
    cancel () {
      // this.$refs.form.resetFields()
      this.dialogFormH()
    },
    async getDetail () {
      const { data } = await detail(this.row)
      console.log(data)
      this.form = { ...data }
    },
    formatDate (row) {
      // 获取单元格数据
      const datac = row
      const dtc = new Date(datac)
      // 获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1
      // 获取日
      let dtuDay = dtc.getDate()
      // 处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = '0' + (dtc.getMonth() + 1)
      }
      // 处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = '0' + dtc.getDate()
      }
      // 获取小时
      let dtuHours = dtc.getHours()
      // 处理1-9时前面加0
      if (dtuHours < 10) {
        dtuHours = '0' + dtc.getHours()
      }
      // 获取分钟
      let dtuMinutes = dtc.getMinutes()
      // 处理1-9分前面加0
      if (dtuMinutes < 10) {
        dtuMinutes = '0' + dtc.getMinutes()
      }
      // 获取秒
      let dtuSeconds = dtc.getSeconds()
      // 处理1-9秒前面加0
      if (dtuSeconds < 10) {
        dtuSeconds = '0' + dtc.getSeconds()
      }
      // 组装年月日时分秒,按自己的要求来
      return (
        dtc.getFullYear() +
        '-' +
        dtuMonth +
        '-' +
        dtuDay +
        ' ' +
        dtuHours +
        ':' +
        dtuMinutes +
        ':' +
        dtuSeconds
      )
      // return (row.TableIsbibei = dd)
      // + " " + dtuHours + ":" + dtuMinutes + ":" + dtuSeconds
    },
    changeType (articleBody) {
      if (this.row) {
        return articleBody?.replace(/<[^>]+>/g, '')
      }
    }
  }
}
</script>

<style scoped lang="less">
span {
  margin-left: 10px;
  color: #606266;
  font-size: 14px;
}
.title {
  margin: 10px 0;
  font-size: 21px;
  color: #606266;
}
.content {
  background: #f5f5f5;
  padding: 10px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  border-top: 1px dashed #ccc;
  margin-top: 15px;
}
</style>
